<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 标签页（Tab）插件</title>
	<link rel="stylesheet" href="css/default.css">
	<script src="js/jquery-1.10.1.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
	<div class="container">

		<ul id="logs-title" class="nav nav-tabs">
			<li class="active">
				<a href="#finish" data-toggle="tab">
					已读消息记录
				</a>
			</li>
			<li class="dropdown">
				<a href="#never" data-toggle="tab">
					未读消息记录
				</a>
			</li>
		</ul>
		<div id="logs-lists" class="tab-content">
			<div class="tab-pane fade in active" id="finish">
				<p class="show-text">已读记录001</p>
				<p class="show-text">已读记录002</p>
				<p class="show-text">已读记录003</p>
				<p class="show-text">已读记录004</p>
				<p class="show-text">已读记录005</p>
			</div>
			<div class="tab-pane fade" id="never">
				<p class="err-title">异常提示:未读记录 (<span>0</span>) </p>
				<p class="show-text">没有异常记录</p>
			</div>
		</div>

	</div>

</body>

</html>